<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>border-contour</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            border-left: 150px solid #232425;
            background-color: #eeeded;
        }

        .box::after {
            content: "";
            clear: both;
            display: block;
        }

        .box-nav {
            width: 150px;
            margin-left: -150px;
            float: left;
        }

        .box-nav-item {
            line-height: 40px;
            color: #fff;
            text-align: center;
        }

        .box-content-module {
            line-height: 40px;
            text-align: center;
            color: #c40dd4;
        }

        .box-content {
            overflow: hidden;
        }

        .btn-group {
            margin-top: 15px;
            text-align: center;
        }

        .box-btn {
            outline: none;
            background-color: #2396ef;
            padding: 12px 40px 10px;
            border: none;
            position: relative;
            color: #fff;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 15px;
        }

        .box-btn::before,
        .box-btn::after {
            content: "";
            position: absolute;
            border: 0 solid transparent;
            height: 0;
            width: 24px;
            transition: all .3s cubic-bezier(0.075, 0.82, 0.165, 1);
        }

        .box-btn::before {
            border-top: 2px solid #2396ef;
            top: -4px;
            right: 0;
        }

        .box-btn::after {
            border-bottom: 2px solid #2396ef;
            bottom: -4px;
            left: 0;
        }

        .box-btn:hover::before,
        .box-btn:hover::after {
            width: 100%;
        }
    </style>
</head>

<body>
    <section class="box">
        <nav class="box-nav">
            <div class="box-nav-item">导航1</div>
        </nav>
        <section class="box-content">
            <div class="box-content-module">模块1</div>
        </section>
    </section>
    <div class="btn-group">
        <button type="button" class="box-btn" id="addNav">添加导航</button>
        <button type="button" class="box-btn" id="addContent">添加模块</button>
    </div>
    <script>
        const navMore = document.getElementById('addNav'),
            moduleMore = document.getElementById('addContent');

        if (navMore && moduleMore) {
            const nav = document.querySelector('.box-nav'),
                section = document.querySelector('.box-content');
            let navIndex = nav.children.length,
                sectionIndex = 1;
            let rand = () => 'f' + (Math.random() + '').slice(-1);
            navMore.onclick = function () {
                navIndex++;
                nav.insertAdjacentHTML('beforeEnd', '<div class="box-nav-item">导航' + navIndex + '</div>');
            };
            moduleMore.onclick = function () {
                sectionIndex++;
                section.insertAdjacentHTML('beforeEnd',
                    '<div class="box-content-module" style="background:#' + [rand(), rand(), rand()].join('') +
                    '">模块' +
                    sectionIndex + '</div>');
            };
        }
    </script>
</body>

</html>